<template>
    <div class="welcome">
        <div class="t_img">
            <img src="../../static/imgs/hailuo2.png">
        </div>
        <div class="w_text">
            欢迎访问云海螺教育后台
        </div>
        <div class="say_hello">
            <img src="../../static/imgs/saye.png">
        </div>
        <v-tour name="myTour" :steps="steps"></v-tour>
        <div class="tour_position2"></div>
    </div>
</template>
<script>
import base from '../api/base.js'
export default {
    name: 'my-tour',
    data () {
      return {
        steps: [
          {
            target: '.w_text',
            content: '欢迎使用新版云海螺双师课堂管理系统！下面会一步步向您介绍本次的改动。'
          },
          {
            target: '.tour_position2',
            content: '为方便校长和老师进行教学管理，所有的约课统一以班级为单位，分为体验班和正式班两种类型。'
          }
        ]
      }
    },
    
    methods:{
       getToken(){
           this.$axios({
                url: base.baseUrl+"/school/setting/get-role-list",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data:{
                    token:localStorage.token,
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(res => {
                if(res.data.code==-2){
                    this.$router.push('/login')
                }
            });
       },
       checkPass(){
          if(document.cookie.indexOf("a=hello")==-1){
              // alert("首次打开！");
              var t=new Date(new Date().getTime()+1000*60*60*24*30);
              document.cookie="a=hello; expires="+t.toGMTString();
              this.$tours['myTour'].start()
          }else{
              // alert("再次打开！");
          }
        }
    },
    created(){
        this.getToken()
    },
    mounted: function () {
      this.checkPass()
    }
}
</script>
<style lang="less" scoped>
    @media screen and (max-width:1440px){
        .welcome{
            padding-top: 20px!important;
        }
        .say_hello{
            img{
                width: 60%!important;
            }
        }
    }
    .welcome{
        width: 98%;
        height: 100%;
        text-align: center;
        padding-top: 200px;
        .t_img{
            img{
                width: 217px;
                height: 217px;
            }
        }
        .w_text{
            font-family: huxiaobo-gdh;
            font-size: 42px;
            line-height: 92px;
            letter-spacing: 5px;
            color: #4d4d4d;
        }
        .say_hello{
            img{
                width: 80%;
            }
        }
        .tour_position2{
            // border:1px solid yellow;
            // width: 10px;
            // height: 10px;
            position: fixed;
            top:110px;
            left: 80px;
        }
    }
</style>


